<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
          name="viewport">
    <meta content="ie=edge" http-equiv="X-UA-Compatible">
    <!--对移动设备进一步友好支持-->
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <title>Document</title>
    <link href="../boot/css/bootstrap.min.css" rel="stylesheet">
    <!--核心jquery js-->
    <script src="../boot/js/jquery-3.4.1.min.js"></script>
    <!--bootstrap 核心 js-->
    <script src="../boot/js/bootstrap.min.js"></script>
    <script>
        $(function () {
            /* $("#btn").click(function(){
                 //用来根据指定url,将页面源码包含到当前指定选择器中  被包含的页面中不能有其他额外标签或样式
                 $("#content").load("./users/list_cpoy.jsp");
             });*/
            //切换样式
            $(".list-group").on("click", ".list-group-item", function () {
                //去掉所有
                $(".list-group-item").removeClass().addClass("list-group-item");
                //点击激活
                $(this).addClass("active");
            });
        })

    </script>
</head>
<body>
<!--导航栏-->
<nav class="navbar navbar-default ">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">Maizi&nbsp;Admin</a>
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav navbar-left">
            <li><a class="btn btn-default" href="./后台首页.html"> <span class="glyphicon glyphicon-home"></span> 后台首页</a>
            </li>
            <li><a class="btn btn-default" href="./用户管理.html"> <span class="glyphicon glyphicon-user"></span> 用户管理</a>
            </li>
            <li><a class="btn btn-default" href="./内容管理.html"> <span class="glyphicon glyphicon-list-alt"></span>
                内容管理</a></li>
            <li><a class="btn btn-default" href="./标签管理.html"> <span class="glyphicon glyphicon-tag"></span> 标签管理</a>
            </li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li class="dropdown">
                <a aria-expanded="false" aria-haspopup="true" class="dropdown-toggle" data-toggle="dropdown" href="#"
                   role="button">admin <span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li class="divider" role="separator"></li>
                    <li><a href="#">Separated link</a></li>
                </ul>
            </li>
            <li><a class="btn btn-default" href=""> <span class="glyphicon glyphicon-off"></span> 退出</a></li>
        </ul>
    </div>
</nav>
<!--栅格容器-->
<div class="container-fluid">
    <div class="row">
        <!--左侧-->
        <div class="col-sm-3 aa">
            <ul class="list-group">
                <li><a class="list-group-item active" href="./内容管理.html" id="btn">
                    内容管理
                </a></li>
                <li><a class="list-group-item"
                       href="javascript:$('#content').load('./内容管理添加.html');">
                    添加内容
                </a></li>
            </ul>
        </div>
        <!--右侧-->
        <!--中心内容-->
        <div id="content">
            <div class="col-sm-9 aa">
                <!--页头-->
                <div class="page-header" style="margin-top: -20px">
                    <h1>内容管理</h1>
                </div>

                <!--标签页组件-->
                <ul class="nav nav-tabs list-group" role="tablist">
                    <li role="presentation"><a aria-controls="home" class="list-group-item active" data-toggle="tab"
                                               href="#home" role="tab">内容管理</a></li>
                    <li role="presentation"><a aria-controls="profile" class="list-group-item" data-toggle="tab"
                                               href="#profile" role="tab">添加内容</a>
                    </li>
                </ul>

                <!-- Tab panes -->
                <div class="tab-content">
                    <div class="tab-pane active" id="home" role="tabpanel">
                        <!--inline from表单-->
                        <!--表格信息-->
                        <table class="table table-striped table-bordered table-hover table-condensed">
                            <tbody>
                            <tr>
                                <td>文章标题</td>
                                <td>作者</td>
                                <td>发布时间</td>
                                <td>操作</td>
                            </tr>
                            <tr>
                                <td>泛Mooc职业教育，效果和就业为王</td>
                                <td>朱朝兵</td>
                                <td>2015-08-08</td>
                                <td>
                                    <div class="dropdown" style="float: left">
                                        <button class="btn btn-default" data-toggle="dropdown">操作<span
                                                class="caret"></span></button>
                                        <ul class="dropdown-menu">
                                            <li><a class="btn btn-primary" href="">修改</a></li>
                                            <li><a class="btn btn-danger" href="">删除</a></li>
                                        </ul>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>泛Mooc职业教育，效果和就业为王</td>
                                <td>朱朝兵</td>
                                <td>2015-08-08</td>
                                <td>
                                    <div class="dropdown" style="float: left">
                                        <button class="btn btn-default" data-toggle="dropdown">操作<span
                                                class="caret"></span></button>
                                        <ul class="dropdown-menu">
                                            <li><a class="btn btn-primary" href="">修改</a></li>
                                            <li><a class="btn btn-danger" href="">删除</a></li>
                                        </ul>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>泛Mooc职业教育，效果和就业为王</td>
                                <td>朱朝兵</td>
                                <td>2015-08-08</td>
                                <td>
                                    <div class="dropdown" style="float: left">
                                        <button class="btn btn-default" data-toggle="dropdown">操作<span
                                                class="caret"></span></button>
                                        <ul class="dropdown-menu">
                                            <li><a class="btn btn-primary" href="">修改</a></li>
                                            <li><a class="btn btn-danger" href="">删除</a></li>
                                        </ul>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>泛Mooc职业教育，效果和就业为王</td>
                                <td>朱朝兵</td>
                                <td>2015-08-08</td>
                                <td>
                                    <div class="dropdown" style="float: left">
                                        <button class="btn btn-default" data-toggle="dropdown">操作<span
                                                class="caret"></span></button>
                                        <ul class="dropdown-menu">
                                            <li><a class="btn btn-primary" href="">修改</a></li>
                                            <li><a class="btn btn-danger" href="">删除</a></li>
                                        </ul>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>泛Mooc职业教育，效果和就业为王</td>
                                <td>朱朝兵</td>
                                <td>2015-08-08</td>
                                <td>
                                    <div class="dropdown" style="float: left">
                                        <button class="btn btn-default" data-toggle="dropdown">操作<span
                                                class="caret"></span></button>
                                        <ul class="dropdown-menu">
                                            <li><a class="btn btn-primary" href="">修改</a></li>
                                            <li><a class="btn btn-danger" href="">删除</a></li>
                                        </ul>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>泛Mooc职业教育，效果和就业为王</td>
                                <td>朱朝兵</td>
                                <td>2015-08-08</td>
                                <td>
                                    <div class="dropdown" style="float: left">
                                        <button class="btn btn-default" data-toggle="dropdown">操作<span
                                                class="caret"></span></button>
                                        <ul class="dropdown-menu">
                                            <li><a class="btn btn-primary" href="">修改</a></li>
                                            <li><a class="btn btn-danger" href="">删除</a></li>
                                        </ul>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>泛Mooc职业教育，效果和就业为王</td>
                                <td>朱朝兵</td>
                                <td>2015-08-08</td>
                                <td>
                                    <div class="dropdown" style="float: left">
                                        <button class="btn btn-default" data-toggle="dropdown">操作<span
                                                class="caret"></span></button>
                                        <ul class="dropdown-menu">
                                            <li><a class="btn btn-primary" href="">修改</a></li>
                                            <li><a class="btn btn-danger" href="">删除</a></li>
                                        </ul>
                                    </div>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                        <!--分页-->
                        <nav>
                            <ul class="pagination pagination-sm" style="float: right">
                                <li><a href=""><span>上一页</span></a></li>
                                <li class="active"><a href="">1</a></li>
                                <li><a href="">2</a></li>
                                <li><a href="">3</a></li>
                                <li><a href="">4</a></li>
                                <li><a href="">5</a></li>
                                <li><a href="">6</a></li>
                                <li><a href=""><span>下一页</span></a></li>
                            </ul>
                        </nav>
                        <!--版权-->
                        <div style="text-align: center">
                            <span>tfvjuuyk kgukgtgyumbdbshbtrrtbrtht</span>
                        </div>
                    </div>
                    <div class="tab-pane " id="profile" role="tabpanel">
                        <form action="" class="form-inline col-sm-12">
                            标题 <br>
                            <input placeholder="请输入要添加的内容" size="100" type=""><br>
                            文章内容 <br>
                            <textarea placeholder="请输入文章正文部分" style="width: 700px;height: 300px">

                            </textarea><br>
                            <input type="checkbox">全局置顶
                            <div style="float: right"><input type="submit" value="发布文章"></div>
                        </form>
                        <div style="text-align: center">
                            <span>©tfvjuuyk kgukgtgyumbdbshbtrrtbrtht</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--        CONTENT结束-->
    </div>
</div>
</body>
</html>